import React, { memo, useMemo, useState } from 'react'

const MyInfo = memo((props) => {
  console.log("myInfo被渲染");
  return <h2>{props.info.name}----{props.info.age}</h2>
});

export default function MemoHookDemo2() {
  console.log("MemoHookDemo2被渲染");
  const [show, setShow] = useState(false)
  
  //1.可以使用useState这样Myinfo组件就不会被渲染
  // const [info, setInfo] = useState();
  
  //局部变量父组件被渲染时重新定义变量，导致Myinfo组件渲染
  // const info = {name: "yzh", age: 18};

  //2.useMemo
  const info = useMemo(() => {
    return {name: "yzh", age: 18}
  }, [])

  return (
    <div>
      <MyInfo info={info} />
      <button onClick={e => setShow(!show)}>show/hide</button>
    </div>
  )
}
